@import "tailwindcss";

/* === Neo UI Theme: 全局酷炫背景与霓虹边框效果 === */

:root {
  --neo-bg-start: 17 24 39; /* slate-900 */
  --neo-bg-end: 31 41 55;   /* slate-800 */
  --neo-cyan: 6 182 212;    /* cyan-500 */
  --neo-blue: 59 130 246;   /* blue-500 */
  --neo-purple: 168 85 247; /* purple-500 */
}

/* 背景网格：细密线条随时间位移，制造科幻感 */
.bg-grid {
  background-image:
          linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 0 0;
  animation: gridMove 35s linear infinite;
}

@keyframes gridMove {
  from { background-position: 0 0, 0 0; }
  to { background-position: 400px 200px, -400px -200px; }
}

/* 极光光晕：多层径向渐变缓慢漂移 */
.bg-aurora {
  background-image:
          radial-gradient(800px 600px at 20% 10%, rgba(var(--neo-blue) / .18), transparent 60%),
          radial-gradient(700px 500px at 80% 20%, rgba(var(--neo-cyan) / .15), transparent 60%),
          radial-gradient(900px 700px at 50% 85%, rgba(var(--neo-purple) / .12), transparent 60%);
  filter: blur(40px);
  animation: auroraDrift 22s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  0% { background-position: 0% 0%, 100% 10%, 50% 80%; }
  100% { background-position: 10% 10%, 90% 0%, 55% 85%; }
}

/* 扫描线叠加：轻微CRT质感 */
.scanlines {
  background-image: linear-gradient(transparent 96%, rgba(255,255,255,0.06) 100%);
  background-size: 100% 3px;
  mix-blend-mode: overlay;
  opacity: .18;
}

/* 星点层：轻微闪烁的星空背景 */
.bg-stars {
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.25) 50%, transparent 51%),
  radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.18) 50%, transparent 51%),
  radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.2) 50%, transparent 51%),
  radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.15) 50%, transparent 51%);
  animation: twinkle 3.5s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: .7; }
  100% { opacity: 1; }
}

/* 玻璃质感面板基类 */
.neo-surface {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.55));
  backdrop-filter: blur(8px);
}

/* 外发光阴影 */
.neo-glow {
  box-shadow:
          0 10px 30px rgba(2,132,199,0.10),
          0 0 0 1px rgba(59,130,246,0.15) inset;
}

/* 动态霓虹边框（不遮挡内容，纯边框发光） */
.neo-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* 边框粗细 */
  border-radius: inherit;
  background: conic-gradient(from 0deg,
  rgba(var(--neo-blue) / .0) 0deg,
  rgba(var(--neo-blue) / .35) 90deg,
  rgba(var(--neo-cyan) / .35) 180deg,
  rgba(var(--neo-purple) / .35) 270deg,
  rgba(var(--neo-blue) / .0) 360deg
  );
  -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotateHue 12s linear infinite;
  pointer-events: none;
}

@keyframes rotateHue {
  to { transform: rotate(360deg); }
}

/* 卡片：整合表层样式 */
.neo-card {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(17,24,39,.72), rgba(17,24,39,.55));
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(2,132,199,0.08);
}

.neo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg,
  rgba(var(--neo-blue) / .35),
  rgba(var(--neo-cyan) / .35),
  rgba(var(--neo-purple) / .35)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shine 6s linear infinite;
  pointer-events: none;
}

@keyframes shine {
  0% { filter: brightness(1); opacity: .9; }
  50% { filter: brightness(1.2); opacity: 1; }
  100% { filter: brightness(1); opacity: .9; }
}

/* 标题特效：渐变字与动态下划线 */
.title-neo {
  background: linear-gradient(90deg, rgb(var(--neo-blue)), rgb(var(--neo-cyan)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px rgba(56,189,248,0.25);
  position: relative;
}

.title-neo::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -10px;
  width: 220px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.8), transparent);
  box-shadow: 0 0 12px rgba(56,189,248,.55);
  animation: underlineFlow 4s ease-in-out infinite;
}

@keyframes underlineFlow {
  0%, 100% { opacity: .5; width: 180px; }
  50% { opacity: 1; width: 240px; }
}

/* 页面级背景：深色渐变 */
.bg-deep {
  background: linear-gradient(135deg, rgb(var(--neo-bg-start)) 0%, rgb(var(--neo-bg-end)) 100%);
}

/* ====== 仅装饰用的无侵入样式（不改变布局尺寸） ====== */
/* 角落 L 形霓虹装饰，贴近大屏样式 */
.corner-bracket {
  position: absolute;
  width: 86px;
  height: 18px;
  pointer-events: none;
}
.corner-bracket::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 86px; height: 2px;
  background: linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,.9) 65%, rgba(56,189,248,0));
  background-size: 200% 100%;
  animation: neonHorizontal 6s linear infinite;
  box-shadow: 0 0 10px rgba(56,189,248,.6);
}
.corner-bracket::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 18px;
  background: linear-gradient(180deg, rgba(56,189,248,0), rgba(56,189,248,.85));
  background-size: 100% 200%;
  animation: neonVertical 6s linear infinite;
  box-shadow: 0 0 8px rgba(56,189,248,.6);
}
.corner-bracket .square {
  position: absolute;
  top: -3px; left: -3px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: rgba(56,189,248,.25);
  border: 1px solid rgba(56,189,248,.85);
  box-shadow: 0 0 10px rgba(56,189,248,.6), inset 0 0 6px rgba(56,189,248,.35);
  animation: pulseSquare 2.4s ease-in-out infinite;
}
.corner-bracket--tl { top: 8px; left: 10px; }
.corner-bracket--tr { top: 8px; right: 10px; transform: scaleX(-1); }

/* 标题下装饰：细线 + 中部胶囊 + 两端细分段 */
.title-line {
  position: absolute;
  left: 50%; bottom: -10px;
  transform: translateX(-50%);
  width: 46%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.8), transparent);
  background-size: 200% 100%;
  animation: titleFlow 8s linear infinite;
  box-shadow: 0 0 8px rgba(56,189,248,.45);
  pointer-events: none;
}
.title-line .capsule {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 8px; border-radius: 9999px;
  background: linear-gradient(90deg, rgba(56,189,248,.25), rgba(6,182,212,.25));
  border: 1px solid rgba(56,189,248,.55);
  box-shadow: 0 0 10px rgba(56,189,248,.55);
  overflow: hidden;
  animation: capsuleGlow 3.5s ease-in-out infinite;
}
.title-line .capsule::after { /* 内部滑动高光 */
  content: "";
  position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  filter: blur(1px);
  animation: glintSlide 2.5s ease-in-out infinite;
}
.title-line::before, .title-line::after {
  content: ""; position: absolute; top: 0; width: 20%; height: 2px;
  background-image: repeating-linear-gradient(90deg, rgba(56,189,248,.0) 0, rgba(56,189,248,.6) 14px, rgba(56,189,248,.0) 16px);
}
.title-line::before { left: 4%; }
.title-line::after { right: 4%; }

/* === 动画 === */
@keyframes neonHorizontal {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
@keyframes neonVertical {
  0% { background-position: 0 0%; }
  100% { background-position: 0 200%; }
}
@keyframes pulseSquare {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(56,189,248,.5), inset 0 0 5px rgba(56,189,248,.3); }
  50% { transform: scale(1.12); box-shadow: 0 0 14px rgba(56,189,248,.8), inset 0 0 8px rgba(56,189,248,.5); }
}
@keyframes titleFlow {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
@keyframes capsuleGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(56,189,248,.5); }
  50% { box-shadow: 0 0 14px rgba(56,189,248,.85); }
}
@keyframes glintSlide {
  0% { left: -30%; }
  100% { left: 100%; }
}
